<template>
	<div class="experience">
		<x-header :title="headerTitle" :left-options="{backText: ''}">
		</x-header>
		<div class="content">
			<div class="content_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">优质商家计划</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">商家体验</tab-item>
				</tab>
			</div>
			<div class="content1" v-if="selectIndex===0">
				<div class="prompt">
					<div>
						<img src="../../assets/images/statistics/no_standard.jpg" alt="" />
						<p>抱歉，您还有4项不符合优质商超标准，调整后会增加用户访问哦，试试呗~</p>
					</div>
				</div>
				<div class="data_lists">
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_06.png" alt="" />
						</div>
						<div>
							<p>
								<span>昨日在售且有库存的商品数</span>
								<img src="../../assets/images/statistics/5_03.png" alt="" />
							</p>
							<p>优质标准：商品数≥600</p>
						</div>
						<p>昨日：347</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_10.png" alt="" />
						</div>
						<div>
							<p>
								<span>近7日，日均营业时长</span>
								<img src="../../assets/images/statistics/5_03.png" alt="" />
							</p>
							<p>优质标准：营业时长≥14小时</p>
						</div>
						<p>日均：0小时</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_16.png" alt="" />
						</div>
						<div>
							<p>
								<span>昨日最大起送价</span>
								<img src="../../assets/images/statistics/5_13.png" alt="" />
							</p>
							<p>优质标准：起送价≤35.00元</p>
						</div>
						<p>昨日：20.00元</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_20.png" alt="" />
						</div>
						<div>
							<p>
								<span>昨日最大配送费</span>
								<img src="../../assets/images/statistics/5_13.png" alt="" />
							</p>
							<p>优质标准：配送费≤5.00元</p>
						</div>
						<p>昨日：5.00元</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_22.png" alt="" />
						</div>
						<div>
							<p>
								<span>近7日，商家承担活动补贴</span>
								<img src="../../assets/images/statistics/5_03.png" alt="" />
							</p>
							<p>优质标准：补贴金额>0.00元</p>
						</div>
						<p>补贴：0.00元</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_28.png" alt="" />
						</div>
						<div>
							<p>
								<span>近7日，超时未接单</span>
								<img src="../../assets/images/statistics/5_13.png" alt="" />
							</p>
							<p>优质标准：超时未接单率=0.00%</p>
						</div>
						<p>未接率：0.00%</p>
					</div>
					<div class="data_list">
						<div>
							<img src="../../assets/images/statistics/5_29.png" alt="" />
						</div>
						<div>
							<p>
								<span>UPC/EAN条码完整率</span>
								<img src="../../assets/images/statistics/5_03.png" alt="" />
							</p>
							<p>优质标准：条码完成率≥90.00%</p>
						</div>
						<p>当前：74.35%</p>
					</div>
				</div>
				<div class="explains">
					<h5>说明：</h5>
					<p>1、以上7项全部达标的商家，将有流量倾斜，可增加门店的曝光次数/访客数，今日提升店铺收入</p>
					<p>2、每天上午9:30左右更新昨日数据</p>
					<p>3、不达标的指标，请自行修改或咨询业务经理，以免影响您的门店收入</p>
				</div>
			</div>
			<div class="content2" v-if="selectIndex===1">
				<div class="check_results">
					<div class="result_left">
						<p>最近7天体检结果：</p>
						<p>您最近7天颗粒无收，暂无体验资格，多多加油！</p>
					</div>
					<div class="result_right">
						<img src="../../assets/images/statistics/1_score.png" alt="" />
					</div>
				</div>
				<div class="update_time">更新时间：暂无更新</div>
				<div class="check_lists">
					<div class="check_list">
						<img src="../../assets/images/statistics/6_03.png" alt="" />
						<p>一星差评率</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_07.png" alt="" />
						<p>起送价</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_10.png" alt="" />
						<p>商品图片完整度</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_12.png" alt="" />
						<p>商品数量</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_15.png" alt="" />
						<p>接单时长</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_17.png" alt="" />
						<p>无效订单率</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_20.png" alt="" />
						<p>顾客催单率</p>
					</div>
					<div class="check_list">
						<img src="../../assets/images/statistics/6_24.png" alt="" />
						<p>营销活动</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, } from 'vux';
	export default {
		name: 'experience',
		data() {
			return {
				selectIndex: 0, //0-商家体验-优质商家计划  1-商家体验
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
		},
		computed: {
			//头部标题文字
			headerTitle() {
				if(this.selectIndex === 0) {
					return '商家体验-优质商家计划';
				} else if(this.selectIndex === 1) {
					return '商家体验';
				}
			},
		},
		created() {
			this.selectIndex = +this.$route.params.id;
		},
		methods: {
			//切换
			onItemClick(value) {
				this.selectIndex = value;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.experience {
		.content {
			.content_nav {
				padding: .28rem .3rem 0 .3rem;
				background: #fff;
			}
			.content1 {
				.prompt {
					height: 1.58rem;
					background: #efefef;
					padding: .38rem .68rem;
					>div {
						display: flex;
						justify-content: center;
						img {
							height: .33rem;
							margin: .05rem .1rem 0 0;
						}
						p {
							font-size: .32rem;
							color: #373737;
							text-align: left;
						}
					}
				}
				.data_lists {
					background: #fff;
					.data_list {
						display: flex;
						justify-content: space-around;
						align-items: center;
						text-align: left;
						padding: .26rem .32rem;
						border-bottom: 1px solid #f6f6f6;
						>div:nth-of-type(1) {
							width: 12%;
							>img {
								width: .6rem;
								height: .6rem;
							}
						}
						>div:nth-of-type(2) {
							width: 63%;
							text-align: left;
							p:nth-of-type(1) {
								display: flex;
								align-items: center;
								span {
									font-size: .28rem;
									color: #383838;
								}
								img {
									width: .74rem;
									height: .34rem;
									margin-left: .15rem;
								}
							}
							p:nth-of-type(2) {
								font-size: .24rem;
								color: #9e9e9e;
							}
						}
						>p {
							width: 25%;
							text-align: right;
							font-size: .24rem;
							color: #9e9e9e;
						}
					}
				}
				.explains {
					background: #efefef;
					font-size: .24rem;
					color: #909090;
					text-align: left;
					padding: .35rem .32rem;
					p {
						margin-top: .06rem;
					}
				}
			}
			.content2 {
				padding-bottom: .7rem;
				.check_results {
					background: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: .3rem;
					margin-top: .3rem;
					.result_left {
						text-align: left;
						p {
							width: 2.9rem;
							font-size: .28rem;
							color: #0d0d0d;
						}
						p:nth-of-type(2) {
							margin-top: .3rem;
						}
					}
					.result_right {
						img {
							width: 2.18rem;
							height: 2.18rem;
						}
					}
				}
				.update_time {
					font-size: .28rem;
					color: #939393;
					text-align: left;
					padding: .16rem .2rem;
				}
				.check_lists {
					background: #fff;
					.check_list {
						display: flex;
						align-items: center;
						padding: .3rem;
						border-bottom: 1px solid #f5f5f5;
						img {
							width: .32rem;
							height: .32rem;
							margin-right: .4rem;
						}
						p {
							font-size: .34rem;
							color: #020202;
						}
					}
				}
			}
		}
	}
</style>